<template>
    <div class="box">
        <!-- 面包屑 -->
        <div class="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-fold"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>订单统计</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-card shadow="always">
            <div slot="header">
                <el-form label-width="100px">
                    <el-form-item label="订单时间:" size="normal">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="timeArr" clearable @change="getTime">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <el-button type="primary" size="medium" @click=searchtimeArr>筛选</el-button>
                <el-button size="medium" @click=clicktimeArr>清空筛选条件</el-button>
            </div>

            <!-- 表格 -->
            <el-table border style="width: 100%" size="medium" :data="transformedData">
                <el-table-column label="区域\服务类型" width="200">
                    <template slot-scope="{ row }">
                        {{ row.area }}
                    </template>
                </el-table-column>
                <el-table-column v-for="(type, index) in types" :key="index" :label="type">
                    <template slot-scope="{ row }">
                        {{ getServiceNum(row, type) }}
                    </template>
                </el-table-column>
                <el-table-column label="总计" width="100">
                    <template slot-scope="{ row }">
                        {{ getTotalNum(row) }}
                    </template>
                </el-table-column>
            </el-table>


        </el-card>
    </div>
</template>
  
<script>


export default {
    data() {
        return {

            tableData: [],
            timeArr: "",
            pladate: ''
        };
    },
    mounted() {
        this.getOrder();
    },
    computed: {
        areas() {
            let areas = [];
            this.tableData.forEach(item => {
                item.indentInfo2s.forEach(info => {
                    if (!areas.includes(info.area)) {
                        areas.push(info.area);
                    }
                });
            });
            return areas;
        },
        types() {
            return this.tableData.map(item => item.typename);
        },
        transformedData() {
            const transformed = [];
            this.areas.forEach(area => {
                const row = { area };
                this.tableData.forEach(item => {
                    const info = item.indentInfo2s.find(info => info.area === area);
                    row[item.typename] = info ? info.num : 0;
                });
                transformed.push(row);
            });
            return transformed;
        },
    },
    methods: {
        async getOrder() {
            let res = await this.$API.OrderNum.reqOrder(this.timeArr);
            if (res.code === 200) {
                this.tableData = res.data;
            } else {
                this.tableData = [];
                this.$message({ message: '没有数据', type: 'error' })
            }
        },
        getServiceNum(row, type) {
            return row[type] || 0;
        },
        getTotalNum(row) {
            let sum = 0;
            for (let type in row) {
                if (type !== "area") {
                    sum += row[type];
                }
            }
            return sum;
        },
        getTime() {
            console.log(this.timeArr);
        },
        clicktimeArr() {
            this.timeArr = ""
            this.getOrder();
        },
        async searchtimeArr() {
            await this.getOrder();
        }

    },
};
</script>
  
<style scoped></style>